import React, {Component} from 'react'
import {Route, Switch, Redirect, Link} from 'react-router-dom'
import store from '@/redux/store'
import {A_countNum} from '@/redux/actions/count'
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
//引入路由页面
import {asyncRouters} from '@/router'
import Home from './pages/Home' //Home是路由组件
import About from './pages/About' //About是路由组件
import TestHooks  from "@/hooks/testHooks"
import {Menu, Button} from 'antd';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  PieChartOutlined,
  MailOutlined,
} from '@ant-design/icons';
const {SubMenu} = Menu;
class App extends Component {
  state = {
    collapsed: false,
  };
  toggleCollapsed = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  componentDidMount() {
    console.log(this.$httpReq);
    console.log(store.getState())
    // console.log("renderSideMenu", asyncRouters);
    // console.log(this.renderSideMenu(asyncRouters));
  }

  //根据路由配置自动生成左侧菜单
  renderSideMenu = (asyncRouter) => {
    return asyncRouter.map(routerItem=>{
       let isAlwaysShow=routerItem.children&&routerItem.children.length===1&&!routerItem.alwaysShow
       if (routerItem.hasOwnProperty("children") && routerItem.children.length > 0&&!isAlwaysShow) {
         return <SubMenu key={routerItem.path} icon={<MailOutlined/>} title={routerItem.meta.title}>
           {this.renderSideMenu(routerItem.children)}
         </SubMenu>
      } else {
         return <Menu.Item key={routerItem.path} icon={<PieChartOutlined/>}>
           <Link to={routerItem.path}>
             {/* {item.icon && <Icon type={item.icon} />} */}
             <span className="nav-text">{routerItem.meta&&routerItem.meta.title}</span>
           </Link>
         </Menu.Item>
      }
    })
  }
  testStore=()=>{
    console.log("修改了store",store.getState());
    store.dispatch({type:"R_countNum",data:10000})
    //this.props.A_countNum(30000);
  }
  render() {
    return (
      <div style={{width: 180 + 'px'}}>
        {/*侧边栏*/}
        <Button type="primary" onClick={this.toggleCollapsed} style={{marginBottom: 16}}>
          {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
        </Button>
        <div className="rowSS">
          <Menu
            defaultSelectedKeys={['2']}
            defaultOpenKeys={['sub1']}
            mode="inline"
            theme="dark"
            inlineCollapsed={this.state.collapsed}
          >
            {this.renderSideMenu(asyncRouters)}
          </Menu>
          {/*顶部内容*/}
          {/*路由部分*/}
          <Switch>
            <Route path="/about" component={About}/>
            <Route path="/home" component={Home}/>
            <Redirect to="/about"/>
          </Switch>
        </div>
        {/*底部*/}
        <div onClick={this.testStore}>{this.props.countNum}asdfasdfasdfsdfs</div>

        <TestHooks/>

      </div>
    )
  }
}


export  default  connect(
  state => ({
    countNum:state.count.countNum,
  }),
  {
    A_countNum
  }
)(App)
